<template>
    <div>
        <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/member/vlist' }">
        <i class="el-icon-s-custom"></i> 
        会员管理
      </el-breadcrumb-item>
      <!-- 当前 -->
      <el-breadcrumb-item>添加会员</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="msj_addvip">
        <!-- 筛选时间 -->
        <div>
            <span style=" font-size:14px;">注册时间</span>
            <el-date-picker
            style="margin:0 5px;"
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
    <el-button type="primary" size="small" @click="shaitime">筛选</el-button>
        </div>

        <div style="padding: 60px 0 0;">
            <div class="msj_checkbox" >
       
                   <el-checkbox  v-for="(item,index) in users" v-model="item.check" :key="index" @change="checks(item)" class="msj_checkList">
                    <div style="display: flex;">
                        <div class="user_author">
                            <img :src="item.user.author" alt="">
                        </div>
                        <div style="font-size: 13px;">
                            <p>{{ item.myname }}</p>
                            <p>{{ item.userId }}</p>
                        </div>
                    </div>
                        
                   </el-checkbox> 
       
            </div>
            <div style="width: 100%; display: flex; justify-content: center; padding: 15px 0;" @click="addvip">
                <el-button type="primary" size="small">确定</el-button>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
import {getmsjusers,putmsjvipfenzu,addmsjviplist} from '../../../utils/api'
export default {
    name: 'PhaemacyAddvips',

    data() {
        return {
            value1: '',
            checkList: [],
            users:[],
            vipfenzu:{}
        };
    },
    created(){
            this.getsuers()
         let {detail}=this.$route.params
         this.vipfenzu=detail?detail:JSON.parse(sessionStorage.getItem('vipdetail'))
         console.log(this.vipfenzu);
    },
    mounted() {
       
    },

    methods: {
        // 请求所有用户
        getsuers(val=''){
            getmsjusers().then(res=>{
            let data=res.data.data.map(v=>{
                v.user=JSON.parse(v.user)
                v.check=false
                return v
            })
            this.users=val?(data.filter(v=>{
                let zc=Number(new Date(`${v.zctime.split(" ")[0]} 00:00:00`))
                return zc>=val[0]&&zc<=val[1]
            })):data
        })
        },
        // 选中 
        checks(v){
            if(v.check){
                this.checkList.push(v)
            }else{
                this.checkList=this.checkList.filter(item=>item.id!=v.id)
            }
            
        },
        addgetviplist(v){
            v.user=JSON.stringify(v.user)
            delete v.check
            delete v.id
            v.lvtag=`lv.1/${this.vipfenzu.bqian}`
            v.vips='普通会员'
            v.jfye="15/20.00"
            v.cjiao="10/200.00"
            addmsjviplist(v).then(res=>{
                console.log(res);
            })
        },
        // 添加会员 
        addvip(){
           this.vipfenzu.vipnums=Number(this.vipfenzu.vipnums)+this.checkList.length
           putmsjvipfenzu(this.vipfenzu).then(res=>{
                this.$message({
                  message:res.data.msg,
                  type: 'success'
                  });
                  this.checkList.map(v=>{
                    this.addgetviplist(v)
                  })
                this.$router.go(-1)  
           })
        },
        // 筛选时间段 
        shaitime(){
            this.value1=this.value1?.map(v=>{
                v=Number(new Date(v)) 
                return v
            })
            this.getsuers(this.value1)
        }
    },
};
</script>

<style  scoped>
    *{
        margin: 0;
    }
    .msj_addvip{
        width: 100%;
        margin: 20px 0 0;
        box-sizing: border-box;
        padding:0 20px;
    }
    .msj_checkbox{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .msj_checkList{
        border: 1px solid #ccc;
        border-radius: 5px;
         margin: 0 35px 10px 0;
        display: flex; align-items: center;
        padding: 15px;
    }
 
    .user_author{
        width: 50px;
        height: 50px;
        margin-right: 10px;
    display: flex; justify-content: center;
    align-items: center; background: #BCBCBC;
    }
    .user_author img{
        width: 40px;
height: 40px;
border-radius: 50%;
    }
</style>